<template>
  <div class="main">
    <a-collapse default-active-key="1" :bordered="false">
      <a-collapse-panel key="1" header="繁育区">
        <vuedraggable class="cardPlace" v-model="data">
          <card-show
            v-for="(item, index) in data"
            :key="index"
            :title="item.title"
            :content="item.content"
            :loading="loading"
            class="acard"
            >
            <img :src="item.src" />
          </card-show>
        </vuedraggable>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script>
import vuedraggable from "vuedraggable"
import CardShow from '@/components/card/CardShow';
export default {
  name:"Breed",
  components:{
    vuedraggable,
    CardShow
  },
  props: {
    loading: {
      type: Boolean
    }
  },
  created(){
    document.body.ondrop = function(event) {
    event.preventDefault();
    event.stopPropagation();
    };
  },
  data() {
    return {
      // loading: true,
      data: [
        {
          title: '新生牛数',
          content: 100,
          src: require("@/assets/home/奶瓶.png")
        },
        {
          title: '发情数',
          content: 200,
          src: require("@/assets/home/情感.png")
        },
        {
          title: '妊娠数',
          content: 30,
          src: require("@/assets/home/心.png")
        },
        {
          title: '配种数',
          content: 60,
          src: require("@/assets/home/性别.png")
        },
      ],
      newData: [],
    };
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    for(var i=0;i<this.data.length;i++){
      this.data[i].sort = i;
    }
    this.newData = this.data;
    console.log("data", this.newData)
    next();
  },
  methods:{
    toOther(){
      this.$router.push({ path: "/user/login"})
    }
  },
  
};
</script>
<style lang="less" scoped>
  .main{
    width: 100%;
    margin-bottom: 20px;
    .cardPlace{
      width: 100%;
      height: 100%;
      padding-left: 3%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .acard{
        width: 300px;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        // margin-right: 71px;
        margin-bottom: 30px;
        img{
          width: 30%;
        }
      }
    }
  }
</style>